<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      teamDesc: (state) => state.config.teamDesc || '',
      joinTeam: (state) => state.config.joinTeam || {},
      teams: (state) => state.config.team || [],
    }),
    stopAniCls() {
      if (this.teams.length > 7) return 'dzq-index-section__bd-list';
      return 'dzq-index-section__bd-list animation-stop';
    },
  },
  methods: {
    handleClick() {
      if (this.joinTeam.url) window.open(this.joinTeam.url);
    },
  },
};
</script>

<template>
  <div class="dzq-index-section dzq-index-section--lightbg">
    <div class="dzq-index-section__hd">
      <h2 class="dzq-index-section__title"><span>团队</span></h2>
      <p class="dzq-index-section__description">
        {{ teamDesc }}
      </p>
    </div>
    <div class="dzq-index-section__bd">
      <div :class="stopAniCls">
        <div class="dzq-layout_section-team">
          <div class="dzq-grid">
            <div v-for="(item, index) in teams" :key="index" class="dzq-grid__item">
              <div class="dzq-grid__box">
                <div class="dzq-layout_section-team-item">
                  <img :src="item.avatar" />
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="teams.length > 7" class="dzq-grid">
            <div v-for="(item, index) in teams" :key="index" class="dzq-grid__item">
              <div class="dzq-grid__box">
                <div class="dzq-layout_section-team-item">
                  <img :src="item.avatar" />
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="joinTeam.url" class="dzq-index-section__ft">
      <button class="dzq-btn" @click="handleClick">{{ joinTeam.text }}</button>
    </div>
  </div>
</template>
